<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <link rel="stylesheet" href="../../css/elementUI.css" />
    <style>
        *{
            padding: 0;
            margin: 0;
        }


    </style>
</head>
<body>
<div id="app">
    <el-card class="box-card">
        <el-form :inline="true" class="demo-form-inline">
            <el-form-item label="用户名">
                <el-input v-model="userInfo.uname" placeholder="用户名"></el-input>
            </el-form-item>
            <el-form-item label="邮箱">
                <el-input v-model="userInfo.email" placeholder="邮箱"></el-input>
            </el-form-item>
            <el-form-item label="权限">
                <el-select v-model="userInfo.status" placeholder="权限">
                    <el-option label="所有" value="0"></el-option>
                    <el-option label="用户" value="2"></el-option>
                    <el-option label="管理员" value="1"></el-option>
                    <el-option label="禁用" value="3"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="queryUserInfo">查询</el-button>
            </el-form-item>
        </el-form>

        <!-- 表格数据 -->
        <el-table
                :data="users"
                border
                show-header
                highlight-current-row
                align="center"
                style="width: 100%; margin-top:40px; min-height:340px">
            <el-table-column
                    label="用户编号" width="80">
                <template slot-scope="scope">
                    <span>{{ scope.row.id }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="用户名" width="100">
                <template slot-scope="scope">
                    <span>{{ scope.row.uname }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="密码">
                <template slot-scope="scope">
                    <span>{{ scope.row.upass }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="头像" width="125">
                <template slot-scope="scope">
                    <div class="demo-image__preview">
                        <el-image
                                style="width: 100px; height: 100px"
                                :src="'../../././'+scope.row.head "
                                :preview-src-list="['../../././'+scope.row.head ]">
                        </el-image>

                    </div>
                </template>
            </el-table-column>
            <el-table-column
                    label="性别" width="80">
                <template slot-scope="scope">
                    <span>{{ scope.row.gender }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="邮箱">
                <template slot-scope="scope">
                    <span>{{ scope.row.email }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="注册时间">
                <template slot-scope="scope">
                    <span>{{ scope.row.regtime }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="权限" width="80">
                <template slot-scope="scope">
                    <span>{{ scope.row.status == 2 ? "用户" : scope.row.status == 1 ? "管理员" : "禁用"}}</span>
                </template>
            </el-table-column>

            <el-table-column label="操作" width="216">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            @click="set(scope.$index, scope.row)">编辑</el-button>
                    <el-button
                            size="mini"
                            @click="add(scope.$index, scope.row)">添加</el-button>
                    <el-button
                            size="mini"
                            type="danger"
                            @click="Delete(scope.$index, scope.row)">禁用</el-button>
                </template>
            </el-table-column>
        </el-table>

    </el-card>

    <el-dialog title="编辑用户信息" :visible.sync="update" @close="cancelUpdate">
        <el-form :inline="true" class="demo-form-inline">
            <el-form-item label="用户名">
                <el-input v-model="updateUser.uname" placeholder="用户名"></el-input>
            </el-form-item>

            <el-form-item label="邮箱">
                <el-input v-model="updateUser.email" placeholder="邮箱"></el-input>
            </el-form-item>

            <el-form-item label="性别">
                <el-radio-group v-model="updateUser.gender">
                    <el-radio label="男"></el-radio>
                    <el-radio label="女"></el-radio>
                </el-radio-group>
            </el-form-item>
        </el-form>
        <el-form :inline="true" class="demo-form-inline">
            <el-form-item label="头像">
                <div class="demo-image__preview">
                    <el-image
                            style="width: 100px; height: 100px"
                            :src="head == '' ? '../../././'+updateUser.head : head"
                            :preview-src-list="[head == '' ? '../../././'+updateUser.head : head]">
                    </el-image>

                </div>
            </el-form-item>
            <el-form-item>
                <input type="file" name="pic" @change="getFile($event)" accept="image/gif, image/jpeg, image/jpg, image/png">
            </el-form-item>
            <el-form-item label="权限">

                <el-select v-model="updateUser.status" placeholder="权限">
                    <el-option label="用户" value="2"></el-option>
                    <el-option label="管理员" value="1"></el-option>
                    <el-option label="禁用" value="3"></el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="cancelUpdate">取 消</el-button>
            <el-button type="primary" @click="updateUserInfo">确 定</el-button>
        </div>
    </el-dialog>

    <el-dialog title="添加用户" :visible.sync="adduser" @close="canceladdUser">
        <el-form :inline="true" class="demo-form-inline">
            <el-form-item label="用户名">
                <el-input v-model="addUser.uname" placeholder="用户名"></el-input>
            </el-form-item>
            <el-form-item label="密码">
                <el-input v-model="addUser.upass" placeholder="密码" show-password></el-input>
            </el-form-item>
            <el-form-item label="邮箱">
                <el-input v-model="addUser.email" placeholder="邮箱"></el-input>
            </el-form-item>
            <el-form-item label="性别">
                <el-radio-group v-model="addUser.gender">
                    <el-radio label="男"></el-radio>
                    <el-radio label="女"></el-radio>
                </el-radio-group>
            </el-form-item>
        </el-form>
        <el-form :inline="true" class="demo-form-inline">
            <el-form-item label="头像">
                <div class="demo-image__preview">
                    <el-image
                            style="width: 100px; height: 100px"
                            :src="head == '' ? '../../././'+addUser.head : head"
                            :preview-src-list="[head == '' ? '../../././'+addUser.head : head]">
                    </el-image>

                </div>
            </el-form-item>
            <el-form-item>
                <input type="file" name="pic" @change="getFile($event)" accept="image/gif, image/jpeg, image/jpg, image/png">
            </el-form-item>
            <el-form-item label="权限">

                <el-select v-model="addUser.status" placeholder="权限">
                    <el-option label="用户" value="2"></el-option>
                    <el-option label="管理员" value="1"></el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="canceladdUser">取 消</el-button>
            <el-button type="primary" @click="addUserInfo">确 定</el-button>
        </div>
    </el-dialog>
</div>
<script src="../../js/vue.js"></script>
<script src="../../js/elementUI.js"></script>
<script src="../../js/axios.js"></script>
<script src="../../js/qs.js"></script>
<script>
    let app = new Vue({
        el:'#app',
        data:{
            head:'',
            userInfo:{
                uname:'',
                email:'',
                status:''
            },
            users:[],
            update:false,
            adduser:false,
            addUser:[],
            updateUser:[]
        },
        mounted(){
            this.selectUsers();
        },
        methods: {
            canceladdUser(){
                this.adduser = false;
                this.head = '';
                this.selectUsers();
            },
            cancelUpdate(){
                this.update = false;
                this.head = '';
                this.selectUsers();
            },
            getFile(obj){
                console.log(obj.target.files[0]);
                this.head = URL.createObjectURL(obj.target.files[0]);
                this.updateUser.head = obj.target.files[0] ;

                if(this.adduser){
                    this.head = URL.createObjectURL(obj.target.files[0]);
                    this.addUser.head = obj.target.files[0] ;
                }
            },
            selectUsers(){
                axios.get("../../user/selectUsers"
                ).then(resp=>{
                    this.users = resp.data;
                });
            },
            queryUserInfo(){
                axios.get("../../user/findMemberByQuery",{
                    params:this.userInfo
                }).then(resp=>{
                    console.log(resp);
                    this.users = resp.data;
                });
            },
            set(index,obj){
                this.update = true;
                this.updateUser = obj;
            },
            Delete(index,obj){
                this.$confirm('此操作将禁用该用户, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$message({
                        type: 'success',
                        message: '操作成功!'
                    });

                    axios.post("../../user/delUser",
                        qs.stringify(
                            {
                                uno:obj.uno
                            }
                        )
                    ).then(resp=>{
                        this.head = '';
                        this.selectUsers();

                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消操作'
                    });
                });
            },
            add(index,obj){
                this.adduser = true;
            },
            addUserInfo(){
                let config = {
                    headers:{
                        'Content-Type':'multipart/form-data'
                    }
                }
                let formData = new FormData();
                formData.append("uname",this.addUser.uname);
                formData.append("upass",this.addUser.upass);
                formData.append("email",this.addUser.email);
                formData.append("head",this.addUser.head);
                formData.append("status",this.addUser.status);

                axios.post("../../user/addUserInfoAdmin",
                    formData,
                    config
                ).then(resp=>{
                    console.log(resp);
                    if(resp.data > 0){
                        alert("添加成功");
                        this.adduser = false;
                        this.head = '';
                        this.selectUsers();
                    }else{
                        alert("输入错误信息，请重新输入！");
                    }
                });
            },
            updateUserInfo(){
                let config = {
                    headers:{
                        'Content-Type':'multipart/form-data'
                    }
                }
                let formData = new FormData();
                formData.append("uno",this.updateUser.uno);
                formData.append("uname",this.updateUser.uname);
                formData.append("email",this.updateUser.email);
                formData.append("head",this.updateUser.head);
                formData.append("status",this.updateUser.status);

                axios.post("../../user/updateUserInfoAdmin",
                    formData,
                    config
                ).then(resp=>{
                    if(resp.data > 0){
                        alert("修改成功");
                        this.update = false;
                        this.head = '';
                        this.selectUsers();
                    }else{
                        alert("输入错误信息，请重新输入！");
                    }
                });
            }
        }
    });
</script>
</body>
</html>